<template>
  <div
    id="carouselExampleSlidesOnly"
    class="carousel slide"
    data-bs-ride="carousel"
  >
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img
          :src="require('@/assets/img/banner/banner-2.png')"
          class="d-block w-100"
          alt="..."
        />
      </div>
    </div>
  </div>

  <div class="container">
    <!-- <a-tabs v-model:activeKey="activeKey" centered>
      <a-tab-pane :key="item.title" :tab="item.name" v-for="item in componentList">
        <component :is="activeKey"></component>
      </a-tab-pane>
    </a-tabs>  -->

    <ul class="nav nav-fill section-nav">
      <li class="nav-item" :key="index" v-for="(item, index) in componentList">
        <a class="nav-link" @click="jumpUrl(item.url)">{{ item.name }}</a>
      </li>
    </ul>

    <router-view v-slot="{ Component }">
      <keep-alive>
        <component
          :is="Component"
          :key="$route.path"
          v-if="$route.meta.keepAlive"
        />
      </keep-alive>
      <component
        :is="Component"
        :key="$route.path"
        v-if="!$route.meta.keepAlive"
      />
    </router-view>
  </div>
</template>

<script>
import Team from "./Team.vue";
import Contact from "./Contact.vue";
import Join from "./Join.vue";
import Culture from "./Culture.vue";
import Resume from "./Resume.vue";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: { Team, Contact, Join, Culture, Resume },
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    console.log(proxy);
    const data = reactive({
      activeKey: "Resume",
      componentList: [
        { title: "Resume", name: "公司简历", url: "/aboutUs/resume" },
        { title: "Culture", name: "企业文化", url: "/aboutUs/culture" },
        { title: "Team", name: "团队简历", url: "/aboutUs/team" },
        { title: "Contact", name: "联系我们", url: "/aboutUs/contact" },
        { title: "Join", name: "加入我们", url: "/aboutUs/join" },
      ],
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {});
    //
    const methods = {
      onTabClick: (name) => {
        data.componentName = name;
      },
      jumpUrl(url) {
        proxy.$router.push(url);
      },
    };
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.section-nav {
  font-size: 1rem;

  .nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #000000;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
      border-color 0.15s ease-in-out;
  }

  .nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #000000;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
      border-color 0.15s ease-in-out;
    position: relative;
  }

  .nav-link:hover::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 3px;
    background: #68a4c4;
    bottom: 0;
    left: calc(50% - 20px);
  }

  .nav-link:hover {
    color: rgb(113, 183, 183);
  }
}
</style>
